<!--
 * @Author: Lin Ming
 * @Date: 2021-02-23 22:38:10
 * @LastEditors: Lin Ming
 * @LastEditTime: 2021-02-25 20:19:39
 * @FilePath: \vue-zheye\src\components\GlobalHeader.vue
-->
<template>
  <div class="lm-global-header">
    <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    mode="horizontal"
    @select="handleSelect">
    <el-avatar shape="square" style="margin-left: 10px; background: #fff;" :size="40" src="https://cn.vuejs.org/images/logo.png"></el-avatar>
  </el-menu>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
// import Logo from '../assets/logo.png'
// import Logo from '@/assets/logo.png'
export default defineComponent({
  name: 'GlobalHeader',
  setup () {
    const activeIndex = ref(1)
    const handleSelect = (key: any, keyPath: any) => {
      console.log(key, keyPath)
    }
    return {
      activeIndex,
      handleSelect
    }
  }
})
</script>

<style>
  .el-menu-demo {
    padding: 10px 0;
    padding-left: 20px;
    display: flex;
    align-items: center;
  }
</style>
